<script lang="ts" setup>
import { reactive } from 'vue';
import type { LibraryDetailItem } from '@/types/interface'
import useMainLibraryFullScreen from '@/utils/useMainLibraryFullScreen'
import useMainModal from '@/utils/useMainModal'

// 指示器展示
const indicatorItems = reactive([
    {
        title: '无货',
        color: 'rgb(84,138,197)',
        type: 1,
        value: 0
    },
    {
        title: '有货',
        color: 'rgb(109,226,178)',
        type: 2,
        value: 10
    },
    {
        title: '预警',
        color: 'rgb(244,183,115)',
        type: 3,
        value: 87
    }
])

// 库存展示
const numItems = reactive([
    {
        title: '库存商品数量',
        type: 1,
        value: 0
    },
    {
        title: '预警商品数量',
        type: 2,
        value: 10
    },
])

// 当前库存详情
const libraryDetailItems = reactive<LibraryDetailItem[]>([])
for(let i = 0;i < 200;i++){
    libraryDetailItems.push({
        type: (i % 3 + 1),
        title: 'A区' + i + '排',
        isSelect: (i == 0)
    })
}

// 某排展开
const browseDetail = (browseItem : LibraryDetailItem)=>{
    const selectedItem = libraryDetailItems.find((item)=>{
        return item.isSelect
    })
    if(selectedItem && selectedItem != browseItem && selectedItem.isSelect){
        selectedItem.isSelect = false
    }
    browseItem.isSelect = !browseItem.isSelect
}

const { changeMainModal } = useMainModal()

// 某一项展开
const browseItemDetail = ()=>{
    changeMainModal()
}

// 切换仓库是否全屏
const { getMainLibraryIsFullScreen } = useMainLibraryFullScreen()
const isMainLibraryFullScreen = getMainLibraryIsFullScreen()

</script>

<template>
    <div class="full-w full-h box-sizing-border row-normal-start-align-start p-t-10 position-r">
        <div class="full-h flex-grow-1 scroll-hidden">
            <!-- 全屏指示器 -->
            <div class="row-normal" v-show="isMainLibraryFullScreen">
                <div class="font-size-10">{{ libraryDetailItems.find((item)=>{ return item.isSelect })?.title }}</div>
                <div class="row-normal-start m-r-10 font-size-10">
                    <div v-for="(item,index) in indicatorItems" :key="index"  class="row-normal-start m-l-30">
                        <span class="indicatorItem" :style="{'background-color':(item.color)}"></span>
                        <span class="m-l-5" style="color: rgb(150, 179, 202);">{{ item.title }}</span>
                        <span class="m-l-5">{{ item.value }}</span>
                    </div>
                    <span v-for="(item,index) in numItems" :key="index" class="row-normal-align-start m-l-30">
                        <span class="font-size-10" style="color: rgb(150, 179, 202);">{{ item.title }}</span>
                        <span class="font-size-10 m-l-5">{{ item.value }}</span>
                    </span>
                </div>
            </div>
            <!-- 主排列 -->
            <div class="main-left-section box-sizing-border cursor-pointer row-normal-wrap">
                <div v-for="(item,index) in libraryDetailItems" :key="index" class="row-normal" :class="[!isMainLibraryFullScreen&&'full-w',isMainLibraryFullScreen&&'unfold_width']" @click="browseDetail(item)">
                    <!-- 收起 -->
                    <div v-if="(!isMainLibraryFullScreen&&!item.isSelect)" class="flex-grow-1 libraryDetailItemCell box-sizing-border m-b-10">
                        <span>{{ item.title }}</span>
                    </div>
                    <!-- 展开 -->
                    <div v-else class="libraryDetailItemExpand row-normal-align-start m-r-10 full-w">
                        <div class="column-normal-align-start flex-shrink-0 floor libraryNormalBorder">
                            <span v-for="(floor,index) in ((item.type == 1) ? [1,2,3] : ((item.type == 2) ? [1,2,3,4,5] : [1,2,3])).reverse()" :key="index" class="font-size-10 m-t-5 m-l-5 m-b-5">
                                {{ floor + '层' }}
                            </span>
                        </div>
                        <div class="flex-grow-1 box-sizing-border m-b-10 shadow-normal-3" style="border-radius: 2px;">
                            <div class="row-normal-wrap full-w" @click.stop="browseItemDetail()">
                                <div style="background-color: rgb(84,138,197);" class="box-sizing-border text-center font-size-10 p-a-15 floorItem" :class="[(item.type == 1)&&'full-4',(item.type == 2)&&'full-3',(item.type == 3)&&'full-2']" v-for="(floorItem,index) in ((item.type == 1) ? 12 : ((item.type == 2) ? 15 : 6))" :key="index">
                                    {{ '1-c-0' + floorItem + '-01' }}
                                </div>
                            </div>
                            <div class="libraryDetailItemExpandCell" :class="[item.isSelect&&'libraryDetailItemExpandCellSelected']">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 小屏指示器 -->
        <div class="flex-shrink-0 full-h" v-show="!isMainLibraryFullScreen">
            <div class="main-right-indicator column-normal-start m-t-20 m-r-10 font-size-10">
                <div v-for="(item,index) in indicatorItems" :key="index"  class="row-normal-start m-t-20 full-w">
                    <span class="indicatorItem" :style="{'background-color':(item.color)}"></span>
                    <span class="m-l-5" style="color: rgb(150, 179, 202);">{{ item.title }}</span>
                    <span class="m-l-5">{{ item.value }}</span>
                </div>
                <div class="full-w m-t-20">
                    <div v-for="(item,index) in numItems" :key="index" class="column-normal-align-start full-w m-b-10">
                        <span class="font-size-10" style="color: rgb(150, 179, 202);">{{ item.title }}</span>
                        <span class="font-size-10 m-t-10">{{ item.value }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹窗 -->
        <DetailModal></DetailModal>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');

.main-left-section
    height calc(100% - 60px)
    margin-top 30px
    width 100%
    overflow auto

.main-right-indicator
    height 100%
    width auto

.indicatorItem
    border-radius 2px
    height 5px
    width 9px

$floorWidth = 35px
.floor
    width $floorWidth
    font-size 9px
    color rgb(99,146,174)

.libraryDetailItemCell
    border-radius 2px
    border .8px solid rgb(16,36,103)
    text-align center
    background-color rgb(25,37,71)
    font-size 10px
    line-height 12px
    padding 10px
    margin-left $floorWidth
    margin-right 10px

.libraryDetailItemExpand
    // border solid 1px rgb(37,53,111)

.libraryDetailItemExpandCell
    border-radius 2px
    border solid 1px rgb(37,53,111)
    text-align center
    font-size 10px
    line-height 12px
    padding 10px
    margin-right 0px

.libraryDetailItemExpandCellSelected 
    background-color rgb(46,62,143)


.floorItem
    border solid 1px rgb(37,53,111)


.unfold_width
    width 33%

</style>